import React, { Component } from "react";
import ReactDOM from "react-dom";
import { addErrorListener } from "../../lib/handleError"
import weixinShare from "../../lib/weixinShare"
import AJAX from "../../lib/ajax"
import Tools from '../../lib/tools';

require('../../lib/rem')
require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./Personal.less');

class Personal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            base_personalData: {
                headimgurl: "",
                nick: '',
                phone: '',
                balance: 0
            },
            isLoading: true,
            id_authed: false,
            wx_type: window.localStorage.getItem('wx_type'),
        }
    }

    componentWillMount() {
        addErrorListener()()
        // 取url参数，wx_type
        window.localStorage.setItem('wx_type', Tools.getParams().wx_type === 'garden' ? Tools.getParams().wx_type : 'logis');
        // Tools.createCookie('wx_type', Tools.getParams().wx_type);
        weixinShare.hideAll();
    }

    componentDidMount() {


        AJAX.appendBaiduAnalysis()

        AJAX.request('user_home', {}, data => {
            if (data.code === 0) {
                const dataBody = data.body
                let mydata = {
                    headimgurl: dataBody.headimgurl,
                    nick: dataBody.nick,
                    phone: dataBody.phone,
                    balance: dataBody.account.balance,
                };

                this.setState({
                    id_authed: dataBody.is_id_authed !== 0, //  0:未实名 1:上传身份证, 2:微信认证过  
                    base_personalData: mydata,
                    isLoading: false
                })
            }
        })
    }

    // 统计客服热线
    totalTelphone() {
        AJAX.request('stat_hotline', {}, (data) => {
        })
    }

    render() {
        const { id_authed, base_personalData: userInfo, isLoading, wx_type } = this.state;

        const display_phone = userInfo.phone ? Tools.formatPhone(userInfo.phone) : '';

        return !isLoading && (
            <div className="page_box">
                <div className="personal">
                    <section className="person_info">
                        <div className="person_info_avatar">
                            <img src={userInfo.headimgurl} alt="" />
                        </div>
                        <div className="person_info_main">
                            <h4 className="info_name">{userInfo.nick}</h4>
                            <p className="info_vice">
                                <label className="info_phone">{display_phone}</label>
                                <span className="info_realName">{id_authed ? '已实名认证' : '未实名认证'}</span>
                            </p>
                        </div>
                    </section>
                    <section className="person_menu">
                        <div className="person_menu_top">
                            <ul className="menu_top_box">
                                <li className="menu_top_item">
                                    <a href="javascript::" onClick={() => window.location.href = "./TopUp?personal_balance=" + userInfo.balance}>
                                        <img src="https://cdn2.jinlb.cn/pic/e9/b9/e9b98a6ab43c90bf4896b9e0d928ee48.png" alt="" className="item_pic" />
                                        <label className="item_title">账户充值</label>
                                    </a>
                                </li>
                                <li className="menu_top_item">
                                    <a href="./Suggestions">
                                        <img src="https://cdn2.jinlb.cn/pic/c2/52/c25200412f1436a86ef981ce7ac0cdc1.png" alt="" className="item_pic" />
                                        <label className="item_title">我要反馈</label>
                                    </a>
                                </li>
                                <li className="menu_top_item">
                                    <a href="tel:400-0052708" onClick={this.totalTelphone}>
                                        <img src="https://cdn2.jinlb.cn/pic/83/41/83414e263eefe21d38eac0f60a3e9931.png" alt="" className="item_pic" />
                                        <label className="item_title">联系客服</label>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div className="person_menu_bottom">
                            <ul className="menu_bottom_box">
                                <li className="menu_bottom_item">
                                    <a href="./MyPackage">
                                        <div className="item_pic">
                                            <img src="https://cdn2.jinlb.cn/pic/02/05/0205b2993cebd48aec0b55e776f211ac.png" alt="" />
                                        </div>
                                        <label className="item_title">我的快递</label>
                                    </a>
                                </li>
                                <li className="menu_bottom_item">
                                    <a href="./DeliverySetting">
                                        <div className="item_pic">
                                            <img src="https://cdn2.jinlb.cn/pic/b3/cc/b3cc7076a87f80180f0c0a2666d5a9b3.png" alt="" />
                                        </div>
                                        <label className="item_title">配送设置</label>
                                    </a>
                                </li>
                                <li className="menu_bottom_item">
                                    <a href={id_authed ? 'javascript:;' : './Authentication?src=personal'}>
                                        <div className="item_pic">
                                            <img src="https://cdn2.jinlb.cn/pic/e2/d3/e2d3d15957bcbcc9b410e67b1427ee25.png" alt="" />
                                        </div>
                                        <label className="item_title">实名认证</label>
                                    </a>
                                </li>
                                <li className="menu_bottom_item">
                                    <a href="./ReplacePhone">
                                        <div className="item_pic">
                                            <img src="https://cdn2.jinlb.cn/pic/c9/c3/c9c39cffb970299743d195495c34e17f.png" alt="" />
                                        </div>
                                        <label className="item_title">改绑手机号</label>
                                    </a>
                                </li>
                                <li className="menu_bottom_item">
                                    <a href="//mp.weixin.qq.com/mp/homepage?__biz=MzA4OTA2OTUwOA==&hid=1">
                                        <div className="item_pic">
                                            <img src="https://cdn2.jinlb.cn/pic/11/a1/11a11dba651e4f1addbbb2a0c390251f.png" alt="" />
                                        </div>
                                        <label className="item_title">帮助说明</label>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>

                <div className="weui-tabbar">
                    <a href={`./PickUp?wx_type=${wx_type}`} className="weui-tabbar__item ">
                        <img src="https://cdn2.jinlb.cn/pic/32/60/326051efb9bf84ee6095fccecae6a789.png" alt=""
                            className="weui-tabbar__icon" />
                        <p className="weui-tabbar__label">首页</p>
                    </a>
                    <a href={`./Personal?wx_type=${wx_type}`} className="weui-tabbar__item">
                        <img src="https://cdn2.jinlb.cn/pic/ec/4b/ec4b6355e6cdeb3ba3007430525f3eca.png" alt=""
                            className="weui-tabbar__icon" />
                        <p className="weui-tabbar__label">我</p>
                    </a>
                </div>
            </div >
        );
    }
}

ReactDOM.render(<Personal />, document.getElementById('app'));
if (module.hot) {
    module.hot.accept();
}

